<template>
  <div class='browseWrapper'>
    <!-- 分类条件 -->
    <div class="categoryWrapper">
        <div class="categoryMiddle">
            <div class="topCategory">
                <div class="topCategoryOne">
                    <div class="allCategory">
                        <span>全部分类：</span>
                    </div>
                    <div class="topCategoryOneItem" v-for="item in APICategoryList" :key="item.id" :class="{active: item.id === selectCategory}" @click="handleCategory(item.id)">
                        {{item.type}}
                    </div>
                </div>
                <div class="topCategoryTwo">
                    <div class="allSource">
                        <span>全部来源：</span>
                    </div>
                    <div class="topCategoryTwoItem" v-for="item in APISourceList" :key="item.id" :class="{active: item.id === selectSource}" @click="handleSource(item.id)">
                        {{item.self}}
                    </div>
                </div>
                <div class="topCategoryThree">
                    <div class="payAndFree">
                        <span>接口类型：</span>
                    </div>
                    <div class="topCategoryThreeItem" v-for="item in APITypeList" :key="item.id" :class="{active: item.id === selectType}" @click="handleType(item.id)">
                        {{item.price}}
                    </div>
                </div>
                <!-- 条件从多到少选择 -->
                <div class="ifSelectWrapper">
                    <div class="ifSelectWrapperItem" v-for="item in ifExistList" :key="item.id" :class="{active: item.id === selectIfExits}" @click="handleIf(item.id)">
                        {{item.title}}<i class="icon iconfont icon-xiangxiajiantou"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="searchResultWrapper">
        <div class="searchResultMiddle" v-loading="loading">
            <div class="starCommend">
                <div class="starCommendItem" v-for="item in allInterfaceList" :key="item.index" @click="handleGoInterfaceDesc()">
                    <div class="starCommendImage">
                        <img :src="item.icon" alt="">
                    </div>
                    <div class="starCommendTitleAndDesc">
                        <p class="starCommendTitle">{{item.name}}</p>
                        <p class="starCommendDesc">{{item.des}}</p>
                    </div>
                    <div class="starPrice">
                        {{item.price}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 分页 -->
    <div class="pageWrapper">
        <div class="pageMiddle">
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[12, 24, 48, 96]"
                    :page-size="12"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalNum">
                </el-pagination>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import Top from '@/components/top/top.vue'
import Footer from '@/components/footer/footer.vue'
import star01Image from '@/assets/img/home/star01.png'
import star02Image from '@/assets/img/home/star02.png'
import star03Image from '@/assets/img/home/star03.png'
import star04Image from '@/assets/img/home/star04.png'
import star05Image from '@/assets/img/home/star05.png'
export default {
  name: 'Browse',
  data () {
    return {
      loading: false,
      totalNum: 0,
      allInterfaceList: [],
      pageNum: 1,
      pageSize: 12,
      currentPage: 1,
      star01Image,
      star02Image,
      star03Image,
      star04Image,
      star05Image,
      selectIfExits: '',
      selectSource: 2,
      selectType: 2,
      selectCategory: '',
      selectUser: '',
      selectCount: '',
      selectCrateAt: '',
      APICategoryList: [
        {
          id: '',
          type: '全部分类'
        }
      ],
      APISourceList: [
        {
          id: 2,
          self: '全部来源'
        },
        {
          id: 0,
          self: '中国联通'
        },
        {
          id: 1,
          self: '其他'
        }
      ],
      APITypeList: [
        {
          id: 2,
          price: '全部'
        },
        {
          id: 0,
          price: '免费接口'
        },
        {
          id: 1,
          price: '收费接口'
        }
      ],
      ifExistList: [
        {
          id: '0',
          title: '使用人数'
        },
        {
          id: '1',
          title: '调用量'
        },
        {
          id: '2',
          title: '上架时间'
        }
      ]
    }
  },
  mounted () {
  },
  components: {
    Top,
    Footer,
    qs
  },
  created () {
    this.getAllCategoryList()
    this.getAllInterfaceList()
  },
  methods: {
    // 获取全部分类
    getAllCategoryList () {
      this.$http.get('/v1/category/findCategoryByParentId?id=0').then(result => {
        if (result.data.code === 200) {
          this.APICategoryList = this.APICategoryList.concat(result.data.data)
        }
      }).catch(errMsg => {
        this.$message({
          message: '获取全部分类API错误',
          type: 'error'
        })
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getAllInterfaceList()
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getAllInterfaceList()
    },
    // 获取所有的接口
    getAllInterfaceList () {
    //   const obj = {
    //     pageNum: this.pageNum,
    //     pageSize: this.pageSize,
    //     belongToCategory: this.selectCategory,
    //     isFree: this.selectType,
    //     isSelf: this.selectSource,
    //     userCountOrderType: this.selectUser,
    //     requestCountOrderType: this.selectCount,
    //     putawayTimeOrderType: this.selectCrateAt
    //   }
      this.loading = true
      this.$http.get('/v1/apiList/getApiListByParams?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize + '&belongToCategory=' + this.selectCategory + '&isFree=' + this.selectType + '&isSelf=' + this.selectSource + '&userCountOrderType=' + this.selectUser + '&requestCountOrderType=' + this.selectCount + '&putawayTimeOrderType=' + this.selectCrateAt).then(result => {
        if (result.data.code === 200) {
          this.allInterfaceList = result.data.data
          this.totalNum = result.data.total
        }
        this.loading = false
      }).catch(errMsg => {
        this.loading = false
        this.$message({
          message: '通过分类获取接口错误',
          type: 'error'
        })
      })
    },
    // 点击获取所有的接口
    handleCategory (id) {
      this.selectCategory = id
      this.getAllInterfaceList()
    },
    // 全部来源
    handleSource (id) {
      this.selectSource = id
      this.getAllInterfaceList()
    },
    // 全部类型
    handleType (id) {
      this.selectType = id
      this.getAllInterfaceList()
    },
    handleIf (id) {
      this.selectIfExits = id
      if (id === '0') {
        this.selectUser = 'desc'
      } else if (id === '1') {
        this.selectCount = 'desc'
      } else if (id === '2') {
        this.selectCrateAt = 'desc'
      }
      this.getAllInterfaceList()
    },
    handleGoInterfaceDesc () {
      this.$router.push('/interfacedesc')
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.browseWrapper {
    background-color white
    padding-top 20px
    margin-top -10px
    .categoryWrapper {
        background-color white
        .categoryMiddle {
            width 1200px
            margin 0 auto
            height 200px
            .topCategory {
                background-color $color-background
                .topCategoryOne {
                    border-bottom-style solid
                    border-width:1px
                    border-color: #E4E4E4
                    margin-top 10px
                    padding 10px 0px
                    display flex
                    justify-content space-around
                    .allCategory {
                        font-size 14px
                    }
                    .topCategoryOneItem {
                        cursor pointer
                        font-size 14px
                        &:hover {
                            color $color-theme
                        }
                    }
                    .active {
                        color $color-theme
                    }
                }
                .topCategoryTwo {
                    border-bottom-style solid
                    border-width:1px
                    border-color: #E4E4E4
                    padding 10px 30px
                    display flex
                    .allSource {
                        font-size 14px
                    }
                    .topCategoryTwoItem {
                        margin-left 63px
                        cursor pointer
                        font-size 14px
                        &:hover {
                            color $color-theme
                        }
                    }
                    .active {
                        color $color-theme
                    }
                }
                .topCategoryThree {
                    border-bottom-style solid
                    border-width:10px
                    border-color: white
                    padding 10px 30px
                    display flex
                    .payAndFree {
                        font-size 14px
                    }
                    .topCategoryThreeItem {
                        margin-left 63px
                        cursor pointer
                        font-size 14px
                        &:hover {
                            color $color-theme
                        }
                    }
                    .active {
                        color $color-theme
                    }
                }
                .ifSelectWrapper {
                    padding 10px 30px
                    display flex
                    .payAndFree {
                        font-size 14px
                    }
                    .ifSelectWrapperItem {
                        margin-right 63px
                        cursor pointer
                        font-size 14px
                        &:hover {
                            color $color-theme
                        }
                    }
                    .active {
                        color $color-theme
                    }
                }
            }
        }
    }
    .searchResultWrapper {
        .searchResultMiddle {
            width 1200px
            margin 0 auto
            .starCommend {
                display flex
                flex-wrap wrap
                margin-bottom 20px
                .starCommendItem {
                    width 168px
                    text-align center
                    cursor pointer
                    margin-bottom 10px
                    border 1px solid #ECECEC
                    padding 20px 60px
                    margin-right 10px
                    &:last-child {
                        margin-right 0px
                    }
                    .starCommendImage {
                        img {
                            width 100px
                            height 100px
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                        margin 0 auto
                    }
                    .starCommendTitleAndDesc {
                        .starCommendTitle {
                            padding-top 20px
                            padding-bottom 5px
                            text-align center
                            font-size  16px
                            font-weight bold
                        }
                        .starCommendDesc {
                            color #999;
                            font-size 14px
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }
                    }
                    .starPrice {
                        padding 20px 0px
                        text-align center
                        color #FF8B00
                        font-weight bold
                    }
                }
            }
        }
    }
    .pageWrapper {
        padding-bottom 10px
        .pageMiddle {
            width 1200px
            margin 0 auto
            .block {
                text-align center
                margin-top 30px
                margin-bottom 30px
            }
        }
    }
}
</style>
